<template>
	<view class="login-modal">
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<image :src="platInfo.logo" mode="" class="logo"></image>
				<view class="lg text-gray cuIcon-close close-box" @click="close">
					
				</view>
				<view class="title">
					欢迎来到{{platInfo.name || ''}}
				</view>
				
				<view class="flex align-center justify-center">
					<view class="bottom-box" @click='handleAgreement'>
						<view class="border" v-if="!isAgreement">
							
						</view>
						<view class="border" v-else>
							<view class="border-cont">
								<view class="lg text-gray cuIcon-check">
									
								</view>
							</view>
						</view>
							我已阅读并同意 <text @click.stop='goPage("/packagesA/pages/my/setting/protocol")'>《用户协议》</text> <text>与</text> <text
								@click.stop='goPage("/packagesA/pages/my/setting/protocol")'>《隐私政策》</text>
					</view>
				</view>
				
				<button class='item reset-btn' open-type='getPhoneNumber' @getphonenumber='wxLogin'
					>
					<view class="btn-box">
						<view class="btn">
							授权手机号码
						</view>
					</view>
				</button>
				
				
				<view class="no-login" @click="close">
					暂不登录
				</view>
				
				
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import {
		loginPass,
		accountUser,
		switchCompanyLogin,
		getPhoneNumber
	} from '@/api/login/login'
	import env from '@/config/env.js'
	import {
		getPlatDetail,
	} from '@/api/common.js'
	import util from '@/common/util'
	export default {
		data(){
			return {
				modalName:"",
				isAgreement:false,
				form:{
					telphone: undefined,
					code: undefined,
					password: undefined
				},
				platInfo:{}
			}
		},
		created() {
			// setTimeout(()=>{
			// 	this.open()
			// },500)
		},
		methods:{
			getPlatDetail() {
				getPlatDetail({
					id: env[env.mchType].platid
				}).then(res => {
					this.platInfo = res;
				})
			},
			// 微信登录
			async wxLogin(e) {
				if (!this.isAgreement) return uni.showToast({
					icon: 'none',
					title: '请阅读并勾选隐私政策'
				})
				this.form.openId = app.globalData.openid
				if (e.detail.code) {
					getPhoneNumber({
						code: e.detail.code,
						mchId: env.mchId
					}).then(res => {
						let data = JSON.parse(res)
						this.form.telphone = data.phoneNumber;
						this.codeLogin()
					})
				}
			},
			// 验证码登录
			codeLogin() {
				uni.showLoading({
					mask: true
				})
				this.form.channelId = uni.getStorageSync('channelId') || -1
				accountUser(this.form).then(res => {
					this.loginSuccess(res)
				})
			},
			// 登录成功后处理逻辑
			loginSuccess(loginRes) {
				uni.removeStorageSync('pet_cargoId')
				if (!loginRes.companyList) {
					util.setLocalCache('token', loginRes.access_token)
					util.setLocalCache('mchId', loginRes.companyId)
					util.setLocalCache('loginData', loginRes)
					util.removeLocalCache('isOut')
					this.$getUserHome()
					uni.$emit('changeCompany')
					this.close()
					// this.goPage("/pages/index/index/index?path=/pages/pet/myPet/index")
				}
				this.$emit('loginSuccess')
				this.form = {
					telphone: undefined,
					code: undefined,
					password: undefined
				}
			
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
			handleAgreement() {
				this.isAgreement = !this.isAgreement;
			},
			open(){
				this.getPlatDetail()
				this.modalName = 'Modal'
			},
			close(){
				this.modalName = ''
			}
		}
	}
</script>

<style scoped lang="scss">
	.login-modal{
		.no-login{
			margin-top: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #AAAAAA;
			line-height: 40rpx;
			text-align: center;
			font-style: normal;
		}
		.btn-box{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 37rpx;
			.btn{
				width: 574rpx;
				height: 88rpx;
				background: var(--primaryBg);
				border-radius: 44rpx;
				
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: var(--btnColor);
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.close-box{
			font-size: 40rpx;
			position: absolute;
			right: 30rpx;
			top: 20rpx;
		}
		.cu-dialog{
			position: relative;
			width: 638rpx;
			// height: 525rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			border: 1rpx solid #979797;
			overflow: initial;
			padding-bottom: 48rpx;
			.logo{
				width: 120rpx;
				height: 120rpx;
				position: absolute;
				top: -60rpx;
				left: 50%;
				transform: translateX(-50%);
				border-radius: 50%;
			}
			.title{
				margin-top: 124rpx;
				
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: var(--h1Color);
				line-height: 45rpx;
				text-align: center;
				font-style: normal;
				
			}
		}
		
		.bottom-box {
			padding-bottom: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: var(--h3Color);
			line-height: 33rpx;
			font-style: normal;
			// position: fixed;
			bottom: 80rpx;
			left: 50%;
			// transform: translateX(-50%);
			width: 100%;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 82rpx;
			.border{
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				border: 2rpx solid #DDDDDD;
				margin-right: 8rpx;
				.border-cont{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100%;
					border-radius: 50%;
					background: var(--primaryBg);
					border: none;
					
					view{
						color: var(--btnColor);
						font-size: 20rpx;
					}
				}
			}
			image {
				margin-right: 12rpx;
				width: 28rpx;
				height: 28rpx;
			}
		
			text {
				color: #4B81AE;
			}
		}
		
	}
	
</style>